<script src="./script.js"></script>
<template>
  <div class="app-container">

    <div class="filter-container">
      <el-input v-model="listQuery.keyword" placeholder="请输入 名称 | 规格 | 条码" clearable style="width: 200px;" class="filter-item" @input="handleSearch" />
      <el-select v-model="listQuery.category" placeholder="一级分类" class="filter-item" style="width: 130px" @change="handleSelectChange">
        <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="listQuery.sub_category" placeholder="二级分类" class="filter-item" style="width: 130px" @change="handleSearch">
        <el-option v-for="item in subCategoryOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        {{ $t('table.add') }}
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分类" width="100px">
        <template slot-scope="{row}">
          <div><el-link type="primary">{{ row.category.parent.name }}></el-link></div>
          <div><el-link type="danger">{{ row.category.name }}</el-link></div>
        </template>
      </el-table-column>
      <el-table-column label="主图" width="100px">
        <template slot-scope="{row}">
          <el-image
            style="width: 80px; height: 80px;"
            :src="row.cover.url"
          />
        </template>
      </el-table-column>
      <el-table-column label="名称" width="170px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="规格">
        <template slot-scope="{row}">
          <div
            v-for="item in row.items"
            :key="item.index"
            style="margin-bottom: 10px"
          >
            <el-tag
              type="success"
            >
              规格名称：{{ item.name }}
            </el-tag>
            <el-tag
              type="info"
            >
              货号：{{ item.sku_no }}
            </el-tag>
            <el-tag type="warming" v-if="item.zone">
              库位：{{ item.zone + item.shelf + '-' + item.floor + '-' + item.number }}
            </el-tag>
            <el-tag type="warming" v-if="item.weight">
              重量：{{ item.weight }}
            </el-tag>

          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')" align="center" width="100">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-drawer
      direction="ltr"
      size="80%"
      :visible.sync="dialogFormVisible"
    >
      <div style="width:80%;margin:0 auto;">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="top" label-width="120px" style="width:100%; margin-left:50px;height:800px;overflow-y: scroll">
          <el-form-item label="名称" prop="name">
            <el-input v-model="temp.name" readonly />
          </el-form-item>
          <el-form-item label="排除地区">

            <el-cascader
              placeholder="请选择城市"
              v-model="selected_area"
              :options="area_options"
              @change="onSelectedArea"
              filterable>
            </el-cascader>

            <div>
              <el-tag
                :key="tag"
                v-for="tag in area_list"
                closable
                :disable-transitions="false"
                @close="onCancelArea(tag)">
                {{ CodeToText[tag] }}
              </el-tag>
            </div>

          </el-form-item>
          <el-form-item label="规格信息">
            <el-table
              :data="temp.items"
              border
              style="margin-top: 10px; margin-bottom: 20px"
            >
              <el-table-column label="规格名称" size="mini" prop="name" align="left" width="280">
                <template slot-scope="{row}">
                  <el-input v-model="row.name" readonly />
                </template>
              </el-table-column>
              <el-table-column label="区" prop="price" align="center" width="120">
                <template slot-scope="{row}">
                  <el-select v-model="row.area_id" placeholder="请选择">
                    <el-option
                      v-for="item in zone_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="架" size="mini" prop="shelf" align="center" width="120">
                <template slot-scope="{row}">
                  <el-input v-model="row.shelf" />
                </template>
              </el-table-column>
              <el-table-column label="层" size="mini" prop="floor" align="center" width="120">
                <template slot-scope="{row}">
                  <el-input v-model="row.floor" />
                </template>
              </el-table-column>
              <el-table-column label="号" size="mini" prop="number" align="center" width="120">
                <template slot-scope="{row}">
                  <el-input v-model="row.number" />
                </template>
              </el-table-column>
              <el-table-column label="条码" size="mini" prop="bar_code" align="center" width="120">
                <template slot-scope="{row}">
                  <el-input v-model="row.sku_no" />
                </template>
              </el-table-column>
              <el-table-column label="重量" size="mini" prop="weight" align="center" width="120">
                <template slot-scope="{row}">
                  <el-input v-model="row.weight" />
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item>
            <el-button @click="dialogFormVisible = false">
              {{ $t('table.cancel') }}
            </el-button>
            <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
              {{ $t('table.confirm') }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

  </div>
</template>
